<template>
  <div class="login">
    <el-form @submit.prevent="doLogin" :model="loginForm" ref="loginForm" :rules="rules">
      <el-tabs size="large" style="padding: 0 2px;" :value="activeKey" @change="handleTabsChange">
        <el-tab-pane label="账户密码登录" name="1">
          <el-alert type="error" :closable="true" v-show="error" :message="error" showIcon
                   style="margin-bottom: 24px;"></el-alert>
          <el-form-item>
            <el-input size="medium"  v-model="loginForm.username">
              <i slot="prefix" class="el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="medium" type="password" v-model="loginForm.password">
              <i slot="prefix" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="手机号登录" name="2">
          <el-form-item>
            <el-input size="medium">
              <i slot="prefix" class="el-icon-mobile"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="8" style="margin: 0 -4px">
              <el-col :span="16">
                <el-input size="medium">
                  <i slot="prefix" class="el-icon-key"></i>
                </el-input>
              </el-col>
              <el-col :span="8" style="padding-left: 4px">
                <el-button style="width: 100%" class="captcha-button" size="medium " @click="getCaptcha">获取验证码</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button :loading="loading" style="width: 100%; margin-top: 4px" size="medium" htmlType="submit" type="primary" @click="doLogin">
          登录
        </el-button>
      </el-form-item>
      <div>
        <a style="float: right" @click="regist">注册账户</a>
      </div>
    </el-form>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {
  beforeCreate () {
  // this.form = this.$form.createForm(this)
  },
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { max: 10, message: '不能大于10个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { max: 10, message: '不能大于10个字符', trigger: 'blur' }
        ]
      },
      loading: false,
      error: '',
      activeKey: '1'
    }
  },
  computed: {
    systemName () {
      return this.$store.state.setting.systemName
    },
    copyright () {
      return this.$store.state.setting.copyright
    }
  },
  created () {
    this.$db.clear()
    this.$router.options.routes = []
  },
  methods: {
    doLogin () {
      console.log(this.activeKey)
      if (this.activeKey === '1') {
        // 用户名密码登录
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true
            let name = this.form.getFieldValue('name')
            let password = this.form.getFieldValue('password')
            this.$post('login', {
              username: name,
              password: password
            }).then((r) => {
              let data = r.data.data
              this.saveLoginData(data)
              setTimeout(() => {
                this.loading = false
              }, 500)
              this.$router.push('/')
            }).catch((e) => {
              console.error(e)
              setTimeout(() => {
                this.loading = false
              }, 500)
            })
          }
        })
      }
      if (this.activeKey === '2') {
        // 手机验证码登录
        this.$message.warning('暂未开发')
      }
    },
    regist () {
      this.$emit('regist', 'Regist')
    },
    getCaptcha () {
      this.$message.warning('暂未开发')
    },
    handleTabsChange (val) {
      this.activeKey = val
    },
    ...mapMutations({
      setToken: 'account/setToken',
      setExpireTime: 'account/setExpireTime',
      setPermissions: 'account/setPermissions',
      setRoles: 'account/setRoles',
      setUser: 'account/setUser',
      setTheme: 'setting/setTheme',
      setLayout: 'setting/setLayout',
      setMultipage: 'setting/setMultipage',
      fixSiderbar: 'setting/fixSiderbar',
      fixHeader: 'setting/fixHeader',
      setColor: 'setting/setColor'
    }),
    saveLoginData (data) {
      this.setToken(data.token)
      this.setExpireTime(data.exipreTime)
      this.setUser(data.user)
      this.setPermissions(data.permissions)
      this.setRoles(data.roles)
      this.setTheme(data.config.theme)
      this.setLayout(data.config.layout)
      this.setMultipage(data.config.multiPage === '1')
      this.fixSiderbar(data.config.fixSiderbar === '1')
      this.fixHeader(data.config.fixHeader === '1')
      this.setColor(data.config.color)
    }
  }
}
</script>

<style lang="less" scoped>
  .login {
    .icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }
  }
</style>
